<template>
	<view>
		<view class="content z-min">
			<slot></slot>
		</view>
		<view v-if="placeholder" :style="{height}" class="hid"></view>
	</view>
</template>

<script>
	export default {
		props: {
			placeholder: { // 固定在底部时，是否生成一个等高元素，以防止塌陷	
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				height: '0px'
			}
		},
		mounted() {
			this.updateHeight()
		},
		methods: {
			async updateHeight() {
				await this.$nextTick()
				uni.createSelectorQuery().in(this).select('.content').boundingClientRect(({
					height
				}) => {
					// console.log(height);
					this.height = `${height}px`
				}).exec()
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		padding-bottom: calc(var(--b) + 20rpx);
		background-color: #fff;
		bottom: 0;
		left: 0;
		right: 0;
		padding-top: 20rpx;
	}

	.hid {
		visibility: hidden;
	}
</style>